<template>
	<view>

        <view class="bottom">
            <img :src="pop_three.image" :alt="pop_three.name">
           
            <view class="person ">
                <span class="name">{{pop_three.name}}</span>
                <p>服务<span>{{pop_three.clients}}</span>人</p>
            </view>

            <button class="dian" @click="open({
								type:'counselor',
								msg:'向他咨询',
								title:'向他咨询',
								item:pop_three
							})">向他咨询</button>
            <button class="liu" @click="goPhone()">留电咨询</button>

        </view>
		
		<uni-popup ref="popup" type="center">
		    <view class="pop-content">
		        <view class="pop-zxs-intr-v3">
		            <view @click="close()" class="pop-shut"></view>
		            <view class="pop-zxs-pic">
		                <img :src="pop_three.image" :alt="pop_three.name">
		            </view>
		            <view class="pop-zxs-txt">
		                <h5>{{pop_three.name}}</h5>
		                <p>已为<span>{{pop_three.clients}}</span>人解答过问题</p>
		            </view>
		            <view class="pop-text">
		                <p class="pop-text-p1">买房政策、房源信息、楼盘分析</p>
		                <p>有问题，他将在第一时间为您解答！ </p>
		            </view>
		             <view class="pop-phone">
		                <input @input="onKeyInput2" :value="mobile" type="pop-text" placeholder="请输入订阅手机号" >
		            </view>
		            <button class="pop-btn-area"  @click="expert">确定</button>
		        </view>
		    </view>   
		</uni-popup> 

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
		},
		data() {
			return {
				
			}
		},
		props: {
			pop_three:{}
		},
		methods: {
			//电话咨询
			goPhone(){
				uni.makePhoneCall({
				    phoneNumber: '400-831-0818' //仅为示例
				});
			},
			open(data){
					  this.pop_three = data.item;
					  this.param ={
					  	'type': data.type,
					  	'msg': data.msg,
					  };
			    this.$refs.popup.open()
			},
			close(){
			     this.$refs.popup.close()
			},
			
			close1(){
			    this.$refs.message.close()
			},
			onKeyInput2: function(event) {
				this.mobile = event.target.value
			},
			expert(){
				//提交
				let _this = this;
				let mobile = this.mobile;
				if(mobile == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(mobile)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				this.param.mobile = mobile;
				// this.param.loupan_res = this.info;
					this.param.counselor_id = this.pop_three.id;
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
							if(res.code == 1){
								uni.showToast({
								    title: res.msg,
								    duration: 2000
								});
							}else{
								uni.showToast({
								    title: res.msg,
								    duration: 2000,
									icon:'none'
								});
							}
						_this.$refs.popup.close()
					}
				);
			},
		}
	}
</script>

<style scoped>
    .bottom{
        display: flex;
    }

     .bottom>img{
        width: 75upx;
        height: 75upx;
        border-radius:50% ;
        margin-top: 20upx;
        margin-left: 40upx;
    }
    .person{
        width: 174upx;
        height: 78upx;
        margin-top: 20upx;
        margin-left: 20upx;
    }
    .name{
        font-size: 32upx;
        font-weight: 550;   
    }
    .person>p{
        font-size: 1.40upx;
    }
    .person>p>span{
        color: #fa5f35;
    }
    button{
        margin-top: 20upx;
        height: 72upx;
        line-height: 72upx;
        margin-left: -40upx;
        color: #fff;
        font-size: 32upx;
    }
    .dian{
        background: #fa5f35;
    }
    .liu{
        background: #13c3c3;
    }
	
	
	.pop-shut{
	    height: 32upx;
	    width: 32upx;
	    position: relative;
	    top:-30upx;
	    left: 560upx;
	    background: url("../../../static/img00/shut.png") no-repeat;
	    background-size: 100% 100%;
	}
	.pop-content{  
	
	    background: #fff;
	    border-radius: 10upx;
	    display: flex;
	} 
	
	.pop-zxs-intr-v3{
	    padding: 50upx 60upx 50upx 60upx;
	    margin: 0 auto;
	
	}
	.pop-zxs-pic{
	    height: 120upx;
	    width: 120upx;  
	    float: left;
	}
	.pop-zxs-pic>img{
	    height: 100%;
	    width: 100%;
	    border-radius: 50%;
	}
	
	.pop-zxs-txt{
	    height: 120upx;
	    margin-left: 140upx;
	    line-height: 60upx;
	   
	}
	.pop-zxs-txt>h5{
	    font-size: 32upx;
	}
	.zxs-txt>p{
	    font-size: 28upx;
	    color: #77808a;
	}
	.pop-zxs-txt>p>span{
	    color: #13c3c3;
	}
	.pop-text{
	    margin-top: 50upx;
	    margin-bottom: 80upx;
	}
	.pop-text>p{
	    width: 500upx;
	    overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	}
	.pop-text-p1{
	    margin-left: 20upx;
	    margin-right: 40upx;
	}
	.pop-phone{
	    border: 1upx solid #cdd7e1;
	    border-radius: 10upx;
	}
	.pop-phone>input{
	    padding: 0 30upx;
		border: 1px solid #E3E3E3;
	}
	input{
	    height: 86upx;
	}
	.pop-btn-area{
	    margin-top: 80upx;
	    margin-bottom: 30upx;
	    background: #13c3c3;
	    color: #fff;
	}
	.pop-expert2-popup{
	    width: 510upx;
	    height: 240upx;
	    background: #fff;
	    border-radius: 10upx;
	}
	.pop-expert2-popup-p{
	    height: 150upx;
	    text-align: center;
	    font-size: 28uxp;
	    color: #3e4a59;
	    line-height: 150upx;
	    border-bottom: 1upx solid rgb(195, 195, 195);
	}
	.pop-expert2-popup-shut{
	    text-align: center;
	    line-height: 90upx;
	    color: #47b3e3;
	} 
	
	
</style>
